<template>
  <play-start ref="playStart"/>
  <el-dialog v-model="dialogVisible" :title="ani.title" center>
    <div v-loading="listLoading" style="min-height: 200px;">
      <el-scrollbar>
        <div v-if="list.length" class="i-grid-container" style="max-height: 500px;">
          <div v-for="it in list">
            <el-card shadow="never">
              <div style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
                <div>
                  {{ it.title }}
                  <br/>
                  <el-text size="small" type="info">
                    {{ it.lastModifyFormat }}
                  </el-text>
                </div>
                <el-button circle icon="VideoPlay" size="large" text type="primary" @click="playStart?.show(ani,it)"/>
              </div>
            </el-card>
            <div style="height: 4px;"/>
          </div>
        </div>
        <div v-else>
          <el-alert :closable="false" center show-icon title="未下载集数或docker映射存在问题" type="error"/>
        </div>
      </el-scrollbar>
      <div v-if="list.length">
        <p style="margin: 6px;text-align: end;">共 {{ list.length }} 项</p>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>

import {ref} from "vue";
import api from "@/js/api.js";
import PlayStart from "./PlayStart.vue";
import formatTime from "@/js/format-time.js";

const dialogVisible = ref(false)
const listLoading = ref(false)
const list = ref([])

let ani = ref({})
let playStart = ref()

const show = (it) => {
  ani.value = it
  listLoading.value = true
  list.value = []
  dialogVisible.value = true
  api.post('api/playlist', it)
      .then(res => {
        list.value = res.data.map(it => {
          return {...it, lastModifyFormat: formatTime(it['lastModify'])}
        })
      })
      .finally(() => {
        listLoading.value = false
      })
}

defineExpose({
  show
})
</script>


<style>
.i-grid-container {
  display: grid;
  grid-gap: 5px;
  width: 100%;
  grid-template-columns: repeat(2, 1fr);
}
</style>
